<template>
  <div class="setting-container">
    <el-card class="setting-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <div class="setting-avatar">
        <el-avatar
          :size="80"
          :src="store?.userInfo?.avatar"
          @click="showImageViewer = true"
        />
        <el-text size="large" class="setting-username">{{
          store?.userInfo?.username
        }}</el-text>
      </div>
      <div v-for="item in items" :key="item.id" class="setting-item">
        <el-text class="item-title">{{ item.title }}</el-text>
        <el-tag class="item-content" type="info">{{
          getContent(item)
        }}</el-tag>
      </div>
      <template #footer>
        <div class="setting-buttons">
          <div>
            <el-button type="primary" @click="userDialogRef.open()"
              ><el-icon>
                <Edit /> </el-icon
              >编辑信息</el-button
            >
            <el-button @click="passwordDialogRef.open()"
              ><el-icon>
                <Unlock /> </el-icon
              >修改密码</el-button
            >
          </div>
          <el-button type="danger" @click="exitHandler"
            ><el-icon>
              <SwitchButton /> </el-icon
            >安全退出</el-button
          >
        </div>
      </template>
    </el-card>
  </div>
  <PasswordResetDialog ref="passwordDialogRef"></PasswordResetDialog>
  <UpdateUserDialog ref="userDialogRef"></UpdateUserDialog>
  <el-image-viewer
    v-if="showImageViewer"
    :url-list="[store?.userInfo?.avatar]"
    @close="showImageViewer = false"
  />
</template>
<script setup>
import { ref, h } from "vue";
import PasswordResetDialog from "../components/PasswordResetDialog.vue";
import UpdateUserDialog from "../components/UpdateUserDialog.vue";
import { useStore } from "../stores";
import { useRouter } from "vue-router";
import { formatFileSize } from "../utils/FormatUtil";
import { ElImageViewer, ElTag, ElText } from "element-plus";

const store = useStore();
const router = useRouter();

const passwordDialogRef = ref(null);
const userDialogRef = ref(null);
const showImageViewer = ref(false);

const items = ref([
  { title: "角色", id: "role" },
  { title: "用户ID", id: "id" },
  { title: "总空间", id: "storage" },
  { title: "已使用空间", id: "used" },
  //   { title: '单文件上传限制', content: '1000.0 MB' },
  //   { title: '上次登录IP', content: '112.36.24.60' },
]);

const getContent = (item) => {
  if (!store.userInfo) {
    return "未登录";
  }
  if(item.id === "role"){
    return store.userInfo[item.id] === "ADMIN" ? "管理员" : "用户"; 
  }
  if (item.id === "used" || item.id === "storage") {
    return formatFileSize(store.userInfo[item.id]);
  } else {
    return store.userInfo[item.id];
  }
};

const exitHandler = () => {
  localStorage.clear("token");
  store.userInfo = null;
  router.push("/login");
};
</script>
<style scoped>
.setting-container {
  display: flex;
  align-items: center;
  height: 100%;
  margin-top: 50px;
}

.setting-card {
  width: 100%;
  min-height: min-content;
}

.setting-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setting-username {
  margin: 12px;
}

.setting-item {
  display: grid;
  grid-template-columns: 150px 100px;
  /* 第一列固定宽度，第二列自适应 */
  gap: 20px;
  margin-bottom: 15px;
}

.setting-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
